<template>
  <div :class="['progress-label', animateStyle]" :style="textStyle">
    <template v-if="showTitle">
      <span
        v-for="(char, index) in animatedText"
        :key="index"
        :style="{
          '--d': `${animationDelay + index * 50}ms`
        }"
      >{{ char }}</span>
    </template>
  </div>
</template>

<script>
export default {
  name: 'AnimateText',
  props: {
    // text动画形式：opacity、scale
    animateStyle: {
      type: String,
      default: 'opacity'
    },
    // 标题
    text: {
      type: String,
      default: ''
    },
    // 文字附加样式
    textStyle: {
      type: Object,
      default: () => {}
    },
    // 动画延迟时间（ms）
    animationDelay: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      showTitle: false
    }
  },
  computed: {
    animatedText() {
      return this.text.split('');
    },
  },
  mounted() {
    this.startAnimation();
  },
  methods: {
    startAnimation() {
      this.showTitle = true;
    },
  }
}
</script>

<style lang="less" scoped>
.progress-label {
  display: inline-flex;
  // justify-content: flex-end;
  &.opacity {
    span {
      animation: fade-in .3s both var(--d);
    }
  }
  &.scale {
    span {
      transform-origin: center 80%;
      animation: title-scale .3s both var(--d);
    }
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes title-scale {
  0% {
    transform: scale(0);
  }
  90% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
</style>